<template>
  <div class="helper-detail">
     <div class="header">
        <div class="title">钻石宝盒助手</div>
      </div>
      <el-collapse
        class="loop"
        v-for="(item, index) in renderData"
        :key="index"
        v-model="activeNames"
        @change="handleChange"
      >
        <el-collapse-item :name="`${index}-1`">
          <template slot="title">
            <div class="header">
              <div :class="['title', activeNames.includes(`${index}-1`) ? 'active' : '']">{{`${item.name} 指数 [${item.num}]`}}</div>
              <div
                class="record"
                @click.stop="handleCheckRecord(item)"
                v-if="!['jackpot'].includes(item.type)"
              >
                {{ `${item.name} 历史记录` }}
              </div>
            </div>
          </template>
          <exponent :inject-data="item.data" :type="item.type" />
        </el-collapse-item>
        <el-collapse-item  :name="`${index}-2`">
          <template slot="title">
            <div class="header">
              <div :class="['title', activeNames.includes(`${index}-2`) ? 'active' : '']">{{`${item.name} 数据说明`}}</div>
            </div>
          </template>
          <explain :type="item.type"/>
        </el-collapse-item>
      </el-collapse>

      <component :is="model" :injectData="injectData" @close="handleClose"></component>
  </div>
</template>

<script>
import exponent from './exponent.vue';
import explain from './explain.vue';
import Log from './log.vue';

import helperData from '@/mock/helper.data.json'

export default {
  name: 'helper-detail',
  components: {
    exponent,
    explain
  },
  data () {
    return  {
      renderData: helperData.helper,
      activeNames: ['0-1'],
      model: null,
      injectData: Object
    }
  },
  methods: {
    handleChange(val) {
      console.log(val);
    },
    handleCheckRecord(item) {
      console.log('check val');
      this.model = Log;
      this.injectData = item;
    },
    handleClose() {
      this.model = null;
    }
  }
}
</script>